<style lang="less">
  .recommend-source {
    overflow: hidden;
    width: 320px;
    h2.recommend-title {
      background: #e9e9e9;
      text-align: center;
      padding: 1em 0 .2em 0;
      margin: 0;
      color: #555;
    }
    a.application {
      background: #1e51d6;
      display: block;
      font-size: 30px;
      padding: .6em 0;
      margin-bottom: .8em;
      text-align: center;
      color: #fff;
    }
    .item {
      margin-bottom: 5px;
      background: #e9e9e9;
      padding: 1em;
      .link {
        display: block;
        position: relative;
        width: 100%;

        img {
          width: 100%;
          height: 220px;
          display: block;
          background: #fbf8a8;
        }

        .head {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          padding: .5em 1em;
          background: rgba(0, 0, 0, .5);
          display: flex;
          justify-content: space-between;
          align-items: center;

          h2 {
            font-size: 24px;
            color: #fff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          em {
            color: #eed60c;
            white-space: nowrap;
            font-size: 18px;
            font-style: normal;
          }

        }

      }
      .application {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        line-height: normal;
        margin-top: 1em;

        .address {
          font-size: 12px;
          color: #000;
          margin-right: 1em;
        }

        .go {
          border-radius: 5px;
          width: 120px;
          background: #0061ae;
          line-height: 35px;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          text-decoration: none;
          text-align: center;
        }

      }
    }
  }
</style>

<template>
  <div class="recommend-source">
    <a class="application" v-if="houseId && category" v-appointment="`${houseId},${category}`">
      <Icon type="ios-home"/>
      预约看房
    </a>
    <h2 class="recommend-title">推荐房源</h2>
    <div class="item" v-for="item in contentList">
      <router-link class="link" :to="{name:'newHouseDetail', params:{ id: item.houseNumber}}">
        <img v-if="item.coverPic" :src="item.coverPic | twoHouseRecommend" alt="">
        <img  v-else :src="no_image" alt="">
        <div class="head">
          <h2 v-text="item.name"></h2>
          <em>{{item.unitPrice}}元/m²</em>
        </div>
      </router-link>
      <div class="application">
        <span class="address">
          {{item.houseAddress}} 建面 {{item.ownArea}}㎡
        </span>
        <a href="javascript:void(0)" v-appointment="`${item.id},${item.category}`" class="go">立即预约</a>
      </div>
    </div>
    <!-- <TwoHouseNews></TwoHouseNews> -->
  </div>
</template>


<script>

  import api from '@/service/api'

  export default {
    components: {
      TwoHouseNews: require('@/components/News/twoHouseNews.vue')
    },
    props: ['houseId', 'category'],
    data () {
      return {
        contentList: [],
        no_image:'http://jyhimg.cdjyh.com/no_image.png?imageMogr2/auto-orient/thumbnail/!325x220r/gravity/Center/crop/325x220/blur/1x0/quality/75|watermark/2/text/5oiQ6YO95ZCJ5YWD5rGH/font/5qW35L2T/fontsize/240/fill/I0Y4RjBGMA==/dissolve/100/gravity/NorthWest/dx/10/dy/10|imageslim'
      }
    },
    computed: {
      title () {
        let title = this.new.title
        return title.substring(0,10) + "...";
      }
    },
    methods: {
      search () {
        this.spinShow = true
        this.contentList = []
        api.newHouseTop8().then((res) => {
          this.contentList = res.data.top8
        }).catch(() => {
          this.spinShow = false
        })
      },
      scrollTop () {
        document.body.scrollTop = 0
      }
    },
    mounted () {
      this.search()
    }
  }
</script>
